<template>
  <el-dialog
    width="500px"
    title="订单发货"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <div
      class="warn-box"
      style="padding:10px"
    >
      <svg-icon
        style="margin-right:10px"
        icon-class="warn"
        :size="20"
      />
      <p style="color:#000000;line-height:23px">发货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作。点击查看<a
        href="https://zuxiaoqi-file.oss-cn-beijing.aliyuncs.com/pdf/%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.pdf"
        class="blue-font"
      >注意事项</a></p>
    </div>
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="订单编号">
        <el-input
          v-model="form.orderId"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="发货类型"
        prop="delivery_type"
      >
        <el-radio-group
          v-model="form.delivery_type"
          @change="handleTypeChange"
        >
          <el-radio :label="1">物流发货</el-radio>
          <el-radio :label="2">上门自取</el-radio>
          <el-radio :label="3">上门安装</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="form.delivery_type==1"
        label="物流公司"
        prop="logistics_name"
      >
        <el-select
          v-model="form.logistics_name"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in logisticsNames"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.delivery_type==1"
        label="物流单号"
        prop="logistics_no"
      >
        <el-input
          v-model="form.logistics_no"
          clearable
          @input="val=>changeInput(val)"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        :loading="isLoading"
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deliverGoods, getLogisticAll,merchantCode,memberCode } from '@/api/order'
import cropUpload from '@/components/cropUpload'
import {getPdf} from "../../../../htmlToPdf";
// import {memberCode} from "../../../../../supplier/src/api/shop";
export default {
  components: { cropUpload },
  props: ['orderId'],
  data() {
    return {
      htmlTitle:'回执单模板',
     //  Startlease:'',
     // Endlease:'',
      farmers:'',
      codeUrl:'',
      qrcodeUrl:'',
      tableData: {
        setmeal_title: '',//套餐信息
        goods_title: '',//型号配置
        seriescode: '',//设备串码
        month_total:'',//租期
        amount:'',//数量
        setmeal_price:'',//设备押金或价格(元)
      },
      setmealVisible:false,

      form: {
        orderId: '',
        delivery_type: 1,
        logistics_name: '',
        logistics_no: '',
        images: []
      },
      rules: {
        delivery_type: [
          { required: true, message: '请选择发货类型', trigger: 'change' }
        ],
        logistics_name: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        logistics_no: [
          { required: true, message: '物流单号不能为空', trigger: 'blur' }
        ]
        // images: [
        //   { required: true, message: '请上传发货凭证', trigger: 'change' }
        // ]
      },
      dialogVisible: false,
      logisticsNames: [],
      isLoading: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.isLoading = false
        this.form = {
          orderId: this.orderId.id,
          delivery_type: 1,
          logistics_name: '',
          logistics_no: '',
          images: []
        }
        this.getSelect()
      } else {
        this.$refs['ruleForm'].resetFields()
      }
    }
  },
  methods: {
    changeInput(value) {
      const pattern = /^[0-9a-zA-Z]*$/g
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.form.logistics_no = ''
      }
    },
    defaultClick(){
        this.setmealVisible= true;
    },
    imgChange(val, type) {
      if (type === 'del') {
        this.form.images.splice(val, 1)
      } else {
        this.form.images.push(val)
      }
      this.$refs.cropUpload.sortList = this.form.images
    },
    handleTypeChange(val) {
      if (val != 1) {
        this.form.logistics_name = ''
        this.form.logistics_no = ''
        this.form.images = []
      }
    },
    saveSetmealContact(){
      getPdf(this.orderId.cert_name+'右租回执单','pdfhtml');
    },
    handleExport(){
      this.setmealVisible =true;
      // var str = this.orderId.begin_time;
      // var str1 =str.indexOf(' ');
      // this.Startlease =str.substring(0,str1);//开始租期
      //
      // var st = this.orderId.end_time;
      // var st1 =st.indexOf(' ');
      // this.Endlease =st.substring(0,st1);//截止租期

      this.farmers = this.orderId.cert_name;//承租人姓名
      this.tableData.setmeal_title = this.orderId.setmeal_title;
      this.tableData.goods_title = this.orderId.goods_title;
      this.tableData.seriescode = '';
      this.tableData.month_total= this.orderId.month_total;
      this.tableData.amount = this.orderId.amount;
      this.tableData.setmeal_price = this.orderId.setmeal_price;
      merchantCode({seller_id:this.orderId.seller_id}).then(res=>{
        if (res.length!=0){

          // console.log(res)
          this.codeUrl=res.data.qr_code_url;
        }

      });
      memberCode({member_id:this.orderId.seller_id}).then(param=>{
        if (param.length!=0){
          // console.log(res)
          this.qrcodeUrl = param.qr_code;
        }
      });
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const params = { ...this.form }
          params.images = params.images.join(',')
          this.isLoading = true
          deliverGoods(params).then(res => {
            this.dialogVisible = false
            this.$emit('getList', true)
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    getSelect() {
      getLogisticAll().then(res => {
        this.logisticsNames = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
  color: $mainBlue;
}
.waterCover{

  //background-image: url('src/assets/x');
  background: url(../../../assets/waterCover/zxqWater.png) no-repeat center;
  background-size: cover;
  text-align: center;
}

table tr td{
  height: 43px;
}
</style>
